import { useSuspenseQuery } from "@tanstack/react-query";
import React, { Suspense } from "react";
// import {
//   Container
// } from "reactstrap";
//Import Breadcrumb
// import Breadcrumbs from "../../components/Common/Breadcrumb";

//i18n
const Dashboard = props => {

  //meta title
  document.title = "Dashboard | Skote - React Admin & Dashboard Template";

  return (
    <div className="page-content">
      <Suspense fallback={<Spining />}>
        <MyComponent />
      </Suspense>
    </div>
  );
};



function Spining() {
  return <p>loading...</p>;
}

let data = null;

function MyComponent() {
  let apireq = function () {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('test');
      }, 2000);
    });
  }
  const {data} = useSuspenseQuery({queryKey: ["test"],
    queryFn: apireq})
 
  return (
    <p>
      My Component, data is {data}
    </p>
  );
}

export default Dashboard;
